<template>
  <div class="h100" ref="projectTableList">
    <s-table
      ref="table"
      class="h100"
      :rowKey="record => record.id"
      :columns="queryParams.fromGcy ? gcycolumn : columns"
      :data="loadData"
      :scroll="{x:true}"
      
      @getPagination="getPagination"
    >
      <!-- 自定义是否认可列 -->
      <span slot="isApproval">
        {{ $t('isApproval') }}
        <question-mark-tip
          :tip-title="$t('isApprovalColumnTip')"
          :popupContainer="getPopupContainer"
        ></question-mark-tip>
      </span>
      <template
        slot-scope="text"
        v-for="column in commonColumns"
        :slot="column.scopedSlots.customRender"
      >
        <span :key="column.dataIndex">{{ text }}</span>
      </template>
      <template #vehicleVersion="text, record">
        <auth-text @click="doAction('showVehicleVersionDetail', record)" :auth="softwarePerms.vehicleVersion.view">
          {{ text }}
        </auth-text>
      </template>
      <!-- 是否认可 -->
      <template #isApproval="text">
        {{ $t(text ? 'ApproveYes' : 'ApproveNo') }}
      </template>
      <template #carSeriesName="text, record">
        {{ record.model ? record.model.brandName : '-' }}
      </template>
      <template #modelName="text, record">
        {{ record.model ? record.model.name : '-' }}
      </template>
      <template #modelCode="text, record">
        {{ record.model ? record.model.code : '-' }}
      </template>
      <template #stereotype="text, record">
        {{ record.model ? record.model.trimLevel : '-' }}
      </template>
      <template #timeOfCreation="text">
        {{ $commonFun.getDateTimeStr(text) }}
      </template>
      <template slot="createTime" slot-scope="text">
        {{ $commonFun.getDateTimeStr(text) }}
      </template>
      <template slot="action" slot-scope="text,record">
        <auth-button
          type="primary"
          :ghost="true"
          size="small"
          :auth="softwarePerms.vehicleVersion.test.edit"
          style="margin-right: 8px;"
          @click="doAction('editVehicleVersion', record)"
          v-if="versionType=='TEST'"
        ><i class="iconfont icon-xiugai"/>{{ $t('edit') }}</auth-button>
        <auth-button
          type="danger"
          :ghost="true"
          size="small"
          :auth="softwarePerms.vehicleVersion.test.delete"
          @click="doAction('deleteList', record)"
          v-if="versionType=='TEST'"
        ><i class="iconfont icon-shanchu3 deleteUlr"/>{{ $t('delete') }}</auth-button>

        <auth-button
          type="primary"
          :ghost="true"
          size="small"
          :auth="softwarePerms.vehicleVersion.prod.edit"
          style="margin-right: 8px;"
          @click="doAction('editVehicleVersion', record)"
          v-if="versionType=='PROD'"
        ><i class="iconfont icon-xiugai"/>{{ $t('edit') }}</auth-button>
        <auth-button
          type="danger"
          :ghost="true"
          size="small"
          :auth="softwarePerms.vehicleVersion.prod.delete"
          @click="doAction('deleteList', record)"
          v-if="versionType=='PROD'"
        ><i class="iconfont icon-shanchu3 deleteUlr"/>{{ $t('delete') }}</auth-button>
      </template>
    </s-table>
  </div>
</template>
<script>
import { vehicleVersionTbColumns } from '../config/list'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import vehicleVersionApi from '@/api/modules/software/vehicleVersion'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import { mapState } from 'vuex'
import { STable } from '@/components'
import AuthText from '@/components/AuthText'
import { softwarePerms } from '@/config/permission/index'
import AuthButton from '@/components/AuthButton'
export default {
  components: {
    tableEllipsis,
    STable,
    AuthText,
    QuestionMarkTip,
    AuthButton
  },
  props:{
    versionType: {
      type: String,
      default: ''
    },
    queryParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    // ...mapState({
    //   queryParams: (state) => {
    //     return state.vehicleVersion.queryParams[this.versionType]
    //   }
    // }),
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  data () {
    let cols = [...vehicleVersionTbColumns];
    if (this.versionType === 'TEST') {
      //隐藏认可
      cols.splice(1, 1);
    }
    return {
      softwarePerms,
      columns: cols,
      gcycolumn: []
    };
  },
  watch: {
    'queryParams.fromGcy': {
      handler (val) {
        // 只有测试车辆版本-工程院tab表格才隐藏操作列
        if (this.versionType !== 'TEST') {
          this.gcycolumn = this.columns
          return
        }
        if (val) {
          this.gcycolumn = this.columns.filter((item) => {
            return item.dataIndex !== 'operation'
          })
        }
      },
      immediate: true
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    getPopupContainer () {
      return document.body
    },
    loadData (parameter) {
      return vehicleVersionApi.getVehicleVersionPageData({ ...parameter, ...this.queryParams }, this.versionType)
    },
    doAction (key, rowData) {
      if (this[key]) {
        this[key](rowData)
        return
      }
      this.$emit('clickbtn', { type: key, data: rowData })
    },
    getPagination () {

    },
    refreshData (bool=false) {
      this.$refs.table && this.$refs.table.refresh(bool)
    },
    // refreshData (isToFirstPage = true) {
    //   let obj = null
    //   if (isToFirstPage) {
    //     obj = { current: 1 }
    //   }
    //   this.$refs.table.loadData(obj)
    // },
    // 批量删除
    deleteList (record) {
      const vm = this
      this.$confirm({
        title: vm.$t('deleteVehicleVersion'),
        content: vm.$t('deleteVehicleVersionTip').replace('__CONTENT__', '（' + record.name + '）'),
        class: 'confirmStyle',
        width: 378,
        onOk () {
          vehicleVersionApi.deleteVehicleVersionData({ ids: [record.id] }, vm.versionType).then(() => {
            vm.$message.success(vm.$t('successfullyDelete'))
            vm.refreshData(false) // 刷新页面
          })
        },
        onCancel () { }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
